<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
    <head>
        <title>Width</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
        <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
        <link rel="stylesheet" href="print.css"  media="print"  type="text/css" />
    </head>

    <body>
        <h1>Width</h1>
        <!--
        <p>Properties: <code>position, left, right, top, bottom</code> have no effect on the <code>&lt;body&gt;</code> element.</p>
        -->

        <div id="main_id">
            <div class="parent">
                <span class="static_inline_auto box">(static) Inline Auto (shrinkwrapped)
                    (<code>position:static, &lt;span&gt;, width:auto</code>) <br />Element</span>

                <div class="line_spacer"></div>
                <!--
                  * uncommenting the following will affect the position of the elements that follow.
                <hr />
                <p>Replace stuff: (inline i) shrinkwrapped, ii) sized, and iii) stretched <code>width:auto</code>; <code>width:35px</code>;
                    <code>width:100%; height:100%</code>)
                </p>
                -->

                <img class="replaced_inline_shrinkwrapped box" src="star.gif" alt="" />
                <img class="replaced_inline_sized box" src="star.gif" alt="" />
                <span class="sized_for_replaced">
                    <img class="replaced_inline_100_pct box" src="star.gif" alt="" />
                </span>

                <div class="line_spacer"></div>

                <span class="inline_block_sized box">Inline-Block Sized (<code>width:500px;</code>; <code>&lt;span&gt;</code>)</span>
                <div class="inline_block_auto box">Inline-Block Auto (shrinkwrapped) (<code>width:auto</code>)</div>
                <span class="inline_block_100_pct box">Inline-Block 100% (stretched) (<code>width:100%</code>)</span>

                <div class="line_spacer"></div>

                <div class="block_sized box">(static) Block Sized (<code>width:500px;</code>; <code>&lt;div&gt;</code>)</div>
                <div class="block_auto box">(static) Block Auto (stretched) (<code>position:static; width:auto</code>)</div>
                <div class="block_100_pct box">(static) Block 100% (stretched) (<code>position:static; width:100%</code>)</div>

                <div class="line_spacer"></div>

                <table class="table_sized box">
                    <tr>
                        <td>Table Sized (<code>width:300px;</code>)</td>
                    </tr>
                </table>
                <table class="table_auto box">
                    <tr>
                        <td>Table Auto (shrinkwrapped) (<code>width:auto</code>)</td>
                    </tr>
                </table>
                <table class="table_100_pct box">
                    <tr>
                        <td>Table 100% (stretched)  (<code>width:100%</code>)</td>
                    </tr>
                </table>

                <div class="line_spacer" ></div>
                <span class="float_sized box">Float Sized (<code>width:300px;</code>)</span>
                <span class="float_auto box">Float Auto (shrinkwrapped) (<code>float:left</code>; <code>&lt;span&gt;; width:auto</code>)</span>
                <span class="float_100_pct box">Float 100% (stretched) (<code>width:100%;</code>)</span>

                <div class="absolute_boxes_section">
                    <!--
                    <div>blah blah blah; where is this??<br />What is going on here?!</div>
                    <div>line #2</div>
                    -->

                    <span class="absolute_sized box">Absolute Sized (<code>width:300px;</code>)</span>
                    <span class="absolute_auto_right_auto box">Absolute Auto (shrinkwrapped) (<code>width:auto; right:auto;</code>)</span>
                    <span class="absolute_auto box">Absolute Auto (stretched) (<code>width:auto; right:0;</code>)</span>
                    <span class="absolute_100_pct box">Absolute 100% (stretched) (<code>width:100%; right:0;</code>)</span>

                </div>
            </div>
        </div>
    </body>
</html>
